'use client'

import styles from "./choose_chapter.module.css"

import { Outline, Selection, EffectComposer } from '@react-three/postprocessing'
import { BlendFunction, Resizer, KernelSize } from 'postprocessing'
import { Physics } from "@react-three/rapier"
import { Canvas } from "@react-three/fiber"
import { KeyboardControls } from "@react-three/drei"
import { Player } from "./components/Player"
import { Suspense } from "react"
import { Island } from "./components/Island"
import { Interface } from "./components/Interface"




export default function Choose_chapter() {
    return (
        <Suspense fallback={<h1>Loading...</h1>}>
            <div className={styles.container}>
                <KeyboardControls
                    map={[
                        { name: 'forward', keys: ['ArrowUp', 'KeyW'] },
                        { name: 'backward', keys: ['ArrowDown', 'KeyS'] },
                        { name: 'leftward', keys: ['ArrowLeft', 'KeyA'] },
                        { name: 'rightward', keys: ['ArrowRight', 'KeyD'] },
                        { name: 'enter', keys: ['Enter'] },
                    ]}
                >
                    <Interface/>
                    <Canvas camera={{ position: [40, 56.5, 40]}}>
                        <Selection enabled>
                            <ambientLight intensity={4} />

                            <Physics>
                                <Player scale={1} />
                                <Island position={[10, -40, 10]} scale={1} rotation={[0,Math.PI/2,0]}/>
                            </Physics>

                            <EffectComposer autoClear={false}>
                                <Outline
                                    resolutionScale={1}
                                    kernelSize={KernelSize.MEDIUM}
                                    edgeStrength={1}
                                    visibleEdgeColor={0xffffff}
                                    blur={true}
                                    xRay={true}
                                />
                            </EffectComposer>
                        </Selection>

                    </Canvas>
                </KeyboardControls>
            </div>
        </Suspense>
    )
}